import React, { Component } from "react"

import Tabs, { Tab } from "../components/Tabs"
import CategorySelect from "../components/CategorySelect"
import PriceForm from "../components/PriceForm"
import Alter from "../components/Alter"
import Loader from "../components/Loader"

import { TYPE_EXPENSE, typeArr } from "../utility"
import withContext from "../withContext"

export class Create extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedType: TYPE_EXPENSE,
      selectedCategory: null,
      title: "",
      price: "",
      date: "",
      alterText: ""
    }
  }

  componentDidMount() {
    const { id } = this.props.match.params
    this.props.actions.getCreateData(id).then(({ categories, editItem }) => {
      // 依据 editItem 来判断是否为编辑模式
      if (editItem) {
        const { title, price, date } = editItem
        this.setState({
          title,
          price,
          date,
          selectedType: categories && categories[editItem.cid].type,
          selectedCategory: categories && categories[editItem.cid]
        })
      }
    })
  }

  handleChangeInputValue = event => {
    const inputName = event.target.id
    this.setState({
      [inputName]: event.target.value
    })
  }

  handleSelectCategory = category => {
    this.setState({
      selectedCategory: category
    })
  }

  handleTabChange = index => {
    this.setState({
      selectedType: typeArr[index]
    })
  }

  handleCancelSubmit = () => {
    this.props.history.push("/")
  }

  handleFormSubmit = data => {
    const { id } = this.props.match.params
    // id 定义与否表示是否为编辑模式
    const isEditMode = !!id
    const { selectedCategory } = this.state
    if (isEditMode) {
      // Edit
      this.props.actions
        .updateItem(data, selectedCategory.id, id)
        .then(item => {
          this.props.history.push("/")
        })
    } else {
      // Create
      if (!selectedCategory) {
        this.setState({
          alterText: "请选择一个图标"
        })
        return
      }
      this.props.actions.createItem(data, selectedCategory.id).then(item => {
        this.props.history.push("/")
      })
    }
  }

  handleAlter = text => {
    this.setState({
      alterText: text
    })
  }

  render() {
    const {
      alterText,
      selectedType,
      selectedCategory,
      title,
      price,
      date
    } = this.state
    const { data } = this.props
    const { categories, isLoading } = data
    const formValue = { title, price, date }
    const filterCategories = Object.keys(categories)
      .filter((item, index) => categories[item].type === selectedType)
      .map(key => categories[key])

    return (
      <div>
        {isLoading && <Loader />}
        <Tabs
          activeIndex={typeArr.indexOf(selectedType)}
          onTabChange={this.handleTabChange}
        >
          <Tab>支出</Tab>
          <Tab>收入</Tab>
        </Tabs>
        <CategorySelect
          categories={filterCategories}
          selectedCategory={selectedCategory}
          onSelectCategory={this.handleSelectCategory}
        />
        <PriceForm
          onFormSubmit={this.handleFormSubmit}
          onCancelSubmit={this.handleCancelSubmit}
          onAlert={this.handleAlter}
          onChangeInputValue={this.handleChangeInputValue}
          {...formValue}
        />
        {alterText && <Alter text={alterText} />}
      </div>
    )
  }
}

export default withContext(Create)
